// ---------------- 查询所有学员，循环展示  ----------------
function renderStudent() {
    axios.get('/student/list').then(({ data: res }) => {
        let { code, data } = res;
        if (code === 0) {
            let trs = ''
            data.forEach(item => {
                trs += `
                <tr>
                     <th scope="row">${item.id}</th>
                     <td>${item.name}</td>
                     <td>${item.age}</td>
                     <td>${item.sex}</td>
                     <td>${item.group}</td>
                     <td>${item.phone}</td>
                     <td>${item.salary}</td>
                     <td>${item.truesalary}</td>
                     <td>${item.province}${item.city}${item.county}</td>
                     <td>
                       <button data-id="${item.id}"  type="button" class="btn btn-primary btn-sm edit">修改</button>
                       <button data-id="${item.id}"  type="button" class="btn btn-danger btn-sm del">删除</button>
                     </td>
                </tr> `
            });
            $('tbody').html(trs)

        }
    })
}
renderStudent()


// ---------------- 删除学员 ----------------
$('tbody').on('click', '.del', function () {
    if (!confirm('你确定要删除吗？')) return;
    let id = $(this).data('id')
    axios.delete('/student/delete', { params: { id } }).then(({ data: res }) => {
        if (res.code === 0) {
            toastr.success(res.message)//提示
            renderStudent();
        }
    })
})

// ---------------- 修改学员 ----------------
$('tbody').on('click', '.edit', function () {
    let id = $(this).data('id')
    // 先做数据回填（所有的修改操作，输入不能是空的，必须把数据的默认值填好，在此之上进行修改)
    axios.get('/student/one', { params: { id } }).then(({ data: res }) => {
        let { code, data } = res;
        console.log(res);
        if (code === 0) {
            // 设置每个表单项的默认值
            $('#updateModal input[name=id]').val(data.id)
            $('#updateModal input[name=name]').val(data.name)
            $('#updateModal input[name=age]').val(data.age)
            $('#updateModal input[name=phone]').val(data.phone)
            $('#updateModal input[name=salary]').val(data.salary)
            $('#updateModal input[name=truesalary]').val(data.truesalary)
            $('#updateModal select[name=group]').children('[value=' + data.group + ']').prop('selected', true);
            $(`#updateModal input[name=sex][value=${data.sex}]`).prop('checked', true)//prop方法作用是让选择的属性勾选
            $('#updateModal select[name=province]').children('[value=' + data.province + ']').prop('selected', true);
            $('#updateModal select[name=city]').html(`<option value="${data.city}">${data.city}</option>`);
            $('#updateModal select[name=county]').html(`<option value="${data.county}">${data.county}</option>`);

        }
    })
    $('#updateModal').modal('show');// 让模态框显示
})

// ---------------- 省市县联动效果 ----------------
// 封装循环遍历的函数
function renderGeo(res, cnName, enName) {
    let str = `<option value="" selected>--${cnName}--</option>`;
    res.forEach(item => {
        str += `<option value="${item}">${item}</option>`;
    })
    $(`select[name=${enName}]`).html(str);
}
// 页面加载完毕，马上获取全部的省
axios.get('/geo/province').then(({ data: res }) => {
    renderGeo(res, '省', 'province')
})

// 省切换的时候，获取对应的市
$('select[name=province]').on('change', function () {
    // 重置县
    $('select[name=county]').html('<option value="" selected>--县--</option>')
    // 获取到当前选择的省
    let pname = $(this).val();// 对于下拉框来说 $('selec').val() 赵的并不是 selec标签的value属性，找的是option的value属性
    // 判断.如果选择了空的省，重置后面的市和县
    if (pname === '') {
        return $('select[name=city]').html('<option value="" selected>--市--</option>')
    }
    // 获取对应的市，并展示到下拉框中
    axios.get('/geo/city', { params: { pname: pname } }).then(({ data: res }) => {
        renderGeo(res, '市', 'city')
    })
})
// 市切换的时候，获取对应的县
$('select[name=city]').on('change', function () {
    // 获取到当前选择的县区
    // let pname = $('select[name = province]').val()
    let pname = $(this).parent().prev().children().eq(0).val()
    let cname = $(this).val();// 对于下拉框来说 $('selec').val() 赵的并不是 selec标签的value属性，找的是option的value属性
    // 判断.如果选择了空的省，重置后面的市和县
    if (cname === '') {
        return $('select[name=county]').html('<option value="" selected>--县--</option>')
    }
    // 获取对应的市，并展示到下拉框中
    axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
        renderGeo(res, '县', 'county')
    })
})



// ---------------- 表单验证 ---------------- 
function student() {
    return {
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '姓名不能为空',
                    },
                    stringLength: {
                        min: 2,
                        max: 10,
                        message: '姓名需要2~10个字符'
                    }
                }
            },
            age: {
                validators: {
                    notEmpty: {
                        message: '年龄不能为空',
                    },
                    greaterThan: {
                        value: 18,
                        message: '年龄必须大于等于18岁'
                    },
                    lessThan: {
                        value: 50,
                        message: '年龄必须小于等于50岁'
                    }
                }
            },
            group: {
                validators: {
                    notEmpty: {
                        message: '组号不能为空',
                    },
                    regexp: {
                        regexp: /^\d{1,2}$/,
                        message: '请选择有效的组号'
                    }
                }
            },
            sex: {
                validators: {
                    choice: {
                        min: 1,
                        max: 1,
                        message: '请选择性别'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空',
                    },
                    regexp: {
                        regexp: /^1\d{10}$/,
                        message: '请填写有效的手机号'
                    }
                }
            },
            salary: {
                validators: {
                    notEmpty: {
                        message: '实际薪资不能为空',
                    },
                    greaterThan: {
                        value: 100,
                        message: '期望薪资不能低于100元'
                    },
                    lessThan: {
                        value: 999999,
                        message: '期望薪资不能高于999999元'
                    }
                }
            },
            truesalary: {
                validators: {
                    notEmpty: {
                        message: '实际薪资不能为空',
                    },
                    greaterThan: {
                        value: 100,
                        message: '实际薪资不能低于100'
                    },
                    lessThan: {
                        value: 999999,
                        message: '实际薪资不能高于999999'
                    }
                }
            },
            province: {
                validators: {
                    notEmpty: {
                        message: '省份必填',
                    },
                }
            },
            city: {
                validators: {
                    notEmpty: {
                        message: '市必填',
                    },
                }
            },
            county: {
                validators: {
                    notEmpty: {
                        message: '县必填',
                    },
                }
            },
        }
    }
}

$('.add-form').bootstrapValidator(student()).on('success.form.bv', function (e) {
    e.preventDefault();
    //提交逻辑
    let data = $(this).serialize();
    // console.log(data);
    axios.post('/student/add', data).then(({ data: res }) => {
        if (res.code === 0) {
            toastr.success(res.message);// 提示
            renderStudent();// 更新页面数据
            $('#addModal').modal('hide') // 这个是关闭模态框（弹出框）的意思
        }
    })
});

$('.update-form').bootstrapValidator(student()).on('success.form.bv', function (e) {
    e.preventDefault();;
    let data = $(this).serialize();
    axios.put('/student/update', data).then(({ data: res }) => {
        // console.log(res);
        if (res.code === 0) {
            toastr.success(res.message);
            renderStudent();
            $('#updateModal').modal('hide')
        }
    })
});